<template>
  <div id="phonelogin" >
    <div class="login-view">
      <div class="images"><img src="../assets/phonebk.png" alt="" /></div>
    <form action="" class="phone-form">
      <label for="" class="flex_start">
        <div class="area flex_start">
          <img src="../assets/phone.png" alt="" />
          <select name="" id="attr">
            <option value="+86">+86</option>
            <option value="+86">+86</option>
            <option value="+86">+86</option>
            <option value="+86">+86</option>
          </select>
        </div>
        <div class="phone-num">
          <input type="text" placeholder="请输入手机号" class="inphone" @keyup.13="login()"/>
        </div>
      </label>
      <label for="" class="flex_start">
        <img src="../assets/pwd.png" alt="" />
        <div class="phone-num">
          <input type="password" placeholder="请输入密码" class="pwd" @keyup.13="login()"/>
        </div>
      </label>
    </form>
    <button @click="login()">登录</button>
    </div>
     
  </div>
</template>

<script>
import userDetail from './userDetail' 
export default {
  name: "phonelogin",
  data() {
    return {
      personData: {},
    };
  },
  components:{
userDetail
  },
 
  methods: {
    login() {
      this.axios({
        method: "get",
        url: "https://music.hzbiz.net/login/cellphone",
        params: {
          phone: document.getElementsByClassName("inphone")[0].value,
          password: document.getElementsByClassName("pwd")[0].value,
        },
      }).then((res) => {
        console.log(res.data);
        localStorage.name = res.
        LOGdata.profile.nickname
        this.axios({
          method: "get",
          url: "https://music.hzbiz.net/user/detail",
          params: {
            uid: res.data.profile.userId,
          },
        }).then((res) => {
          this.personData = res.data;
         
          localStorage.userData = JSON.stringify(res.data)
          if (res.data) {
            this.$router.push("/userDetail");
          }
          
        });
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("../css/login.css");
</style>
